<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container >
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="片区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="areaId">
              <j-dict-select-tag type="list" v-model="model.areaId" dictCode="mws_t_base_areas,name,id" placeholder="请选择片区" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="用户编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="model.code" placeholder="请输入用户编号" :readonly="codeStatus ? false : 'readonly'" ></a-input>             
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="户名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactId">
              <j-search-select-tag v-model="model.contactId" dict="mws_t_arc_contacts,name,id"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="model.address" placeholder="请输入地址"  ></a-input>
            </a-form-model-item>
          </a-col>      
          <a-col :span="8">
            <a-form-model-item label="用户状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterUserStatus">
              <j-dict-select-tag type="list" v-model="model.waterUserStatus" dictCode="water_user_status" placeholder="请选择用户状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="分组编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="groupname">
              <a-input v-model="model.groupname" placeholder="请输入分组编号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a @click="() => toggleFeeStatus = !toggleFeeStatus" style="float: right; margin-top: 10px">
              计费信息-{{ toggleFeeStatus ? '收起' : '展开' }}
              <a-icon :type="toggleFeeStatus ? 'up' : 'down'"/>
            </a>
        </a-row>
        <a-row v-show="toggleFeeStatus">
          <a-col :span="8">
            <a-form-model-item label="用水性质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="natureId">
  	          <j-tree-select
                ref="treeSelect"
                placeholder="请选择用水性质"
                v-model="model.natureId"
                dict="mws_t_base_natures,name,id"
                pidValue="0"
                >
              </j-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="水表用途" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterUseType">
              <j-dict-select-tag type="list" v-model="model.waterUseType" dictCode="water_use_type" placeholder="请选择水表用途" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-model-item label="启用时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enabledTime">
              <j-date placeholder="请选择启用时间" v-model="model.enabledTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-model-item label="是否计量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isCalculated">
              <j-dict-select-tag type="list" v-model="model.isCalculated" dictCode="yn" placeholder="请选择是否计量" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否计费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isCharged">
              <j-dict-select-tag type="list" v-model="model.isCharged" dictCode="yn" placeholder="请选择是否计费" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否预存" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isStored">
              <j-dict-select-tag type="list" v-model="model.isStored" dictCode="yn" placeholder="请选择是否预存" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否增值税" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isVat">
              <j-dict-select-tag type="list" v-model="model.isVat" dictCode="yn" placeholder="请选择是否增值税用户" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否预开票" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isPreinvoiced">
              <j-dict-select-tag type="list" v-model="model.isPreinvoiced" dictCode="yn" placeholder="请选择是否预开票户" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否阶梯" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isTieredPrice">
              <j-dict-select-tag type="list" v-model="model.isTieredPrice" dictCode="yn" placeholder="请选择是否启用阶梯" />
            </a-form-model-item>
          </a-col>
         
            <a @click="() => toggleMeterStatus = !toggleMeterStatus" style="float: right; margin-top: 10px">
              水表信息-{{ toggleMeterStatus ? '收起' : '展开' }}
              <a-icon :type="toggleMeterStatus ? 'up' : 'down'"/>
            </a>
          
        </a-row>
        <a-row v-show="toggleMeterStatus">
          <a-col :span="8">
            <a-form-model-item label="是否远传表" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isRemote">
              <j-dict-select-tag type="list" v-model="model.isRemote" dictCode="yn" placeholder="请选择是否远传表" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="加压级别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterPressurLevel">
              <j-dict-select-tag type="list" v-model="model.waterPressurLevel" dictCode="water_pressur_level" placeholder="请选择加压级别" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="水表井号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manholeId">
              <a-input v-model="model.manholeId" placeholder="请输入水表井号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="口径" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterCaliberSize">
              <j-dict-select-tag type="list" v-model="model.waterCaliberSize" dictCode="water_caliber_size" placeholder="请选择口径" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="水表安装日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firstInstallTime">
              <j-date placeholder="请选择水表安装日期" v-model="model.firstInstallTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-model-item label="最后换表时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lastReplacedTime">
              <j-date placeholder="请选择最后换表时间"  v-model="model.lastReplacedTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->

           <a @click="() => toggleReadStatus = !toggleReadStatus" style="float: right; margin-top: 10px">
              抄表信息-{{ toggleReadStatus ? '收起' : '展开' }}
              <a-icon :type="toggleReadStatus ? 'up' : 'down'"/>
            </a>

        </a-row>
        <a-row v-show="toggleReadStatus">
          <!-- <a-col :span="8">
            <a-form-model-item label="水表止度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lastReadScale">
              <a-input-number v-model="model.lastReadScale" placeholder="请输入水表止度" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-model-item label="初始读数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firstScale">
              <a-input-number v-model="model.firstScale" placeholder="请输入初始读数" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          
          <a-col :span="8">
            <a-form-model-item label="抄表周期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterReadCycle">
              <j-dict-select-tag type="list" v-model="model.waterReadCycle" dictCode="water_read_cycle" placeholder="请选择抄表周期" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="本月是否要抄表" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isRead">
              <j-dict-select-tag type="list" v-model="model.isRead" dictCode="yn" placeholder="请选择本月是否要抄表" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="应抄次数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="readTimes">
              <a-input-number v-model="model.readTimes" placeholder="请输入应抄次数" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="待抄次数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unreadTimes">
              <a-input-number v-model="model.unreadTimes" placeholder="请输入待抄次数" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="应缴费日" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paidDay">
              <a-input v-model="model.paidDay" placeholder="请输入应缴费日"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.remark" placeholder="请输入说明"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'ArcCustomersForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        codeStatus: true,
        confirmLoading: false,
        toggleMeterStatus: false,
        toggleReadStatus: false,
        toggleFeeStatus: false,
        validatorRules: {
           code: [
              { required: true, message: '请输入用户编号!'},
           ],
           contactId: [
              { required: true, message: '请输入户名!'},
           ],
           address: [
              { required: true, message: '请输入地址!'},
           ],
           waterUserStatus: [
              { required: true, message: '请输入用户状态!'},
           ],
           natureId: [
              { required: true, message: '请输入用水性质!'},
           ],
           waterUseType: [
              { required: true, message: '请输入水表用途!'},
           ],
           isCalculated: [
              { required: true, message: '请输入是否计量!'},
           ],
           isCharged: [
              { required: true, message: '请输入是否计费!'},
           ],
           isStored: [
              { required: true, message: '请输入是否预存!'},
           ],
           isTieredPrice: [
              { required: true, message: '请输入是否启用阶梯!'},
           ],
           isRemote: [
              { required: true, message: '请输入是否远传表!'},
           ],
           firstScale: [
              { required: true, message: '请输入初始读数!'},
           ],
           firstInstallTime: [
              { required: true, message: '请输入水表安装日期!'},
           ],
           waterReadCycle: [
              { required: true, message: '请输入抄表周期!'},
           ],
           isRead: [
              { required: true, message: '请输入本月是否要抄表!'},
           ],
           readTimes: [
              { required: true, message: '请输入应抄次数!'},
           ],
           unreadTimes: [
              { required: true, message: '请输入待抄次数!'},
           ],
           paidDay: [
              { required: true, message: '请输入应缴费日!'},
           ],
        },
        url: {
          add: "/arc/arcCustomers/add",
          addCusNo: "/arc/arcCustomers/addCusNo",
          edit: "/arc/arcCustomers/edit",
          queryById: "/arc/arcCustomers/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {        
        this.edit(this.modelDefault);
        this.addInit();
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      addInit(){
        const that = this
        httpAction(this.url.addCusNo,null,'get').then((res)=>{
          if(res.success){         
            that.model.code=res.result; 
            that.codeStatus=false;
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      }
    }
  }
</script>